import React, { Component } from 'react'
import dayjs from 'dayjs'
import classNames from 'classnames'

export default class CommentList extends Component {
  render() {
    const { comments } = this.props
    const formatTime = (date) => {
      return dayjs(date).format('YYYY-MM-DD')
    }
    return (
      <div>
        <ul className="comm-list">
          {comments.map((item) => {
            return (
              <li className="comm-item" key={item.id}>
                <img className="avatar" src={item.avatar}></img>
                <div className="info">
                  <p className="name vip">
                    {item.name}
                    {item.vip ? (
                      <img src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
                    ) : (
                      ''
                    )}
                  </p>
                  <p className="time">
                    {formatTime(item.time)}
                    <span
                      className={classNames('iconfont', {
                        'icon-collect': !item.collect,
                        'icon-collect-sel': item.collect,
                      })}
                      onClick={() => this.props.onSetCollect(item.id)}
                    ></span>
                    <span
                      className="del"
                      onClick={() => {
                        this.props.onRemoveComments(item.id)
                      }}
                    >
                      删除
                    </span>
                  </p>
                  <p>{item.content}</p>
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}
